<template>
  <div class="home_container">
    <el-container>
      <!-- Header区域 -->
      <el-header
        style="text-align: right; font-size: 12px; border: 1px solid #e9e9e9"
      >
        <!-- 欢迎标语  -->
        <span>亲，还您的到来~~~</span>
        <!-- 搜索框 -->
        <el-input
          style="width: 80%; margin-right: 20px"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
        >
        </el-input>
        <!-- 下拉框 -->
        <el-dropdown @command="handleCommand">
          <i class="el-icon-s-custom" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>苏江明</span>
      </el-header>
      <!-- 主内容区域 -->
      <el-main>
        <div class="goods_info">
          <div class="goods_info_img_div">
            <el-image
              style="width: 100%; height: 100%"
              :src="goodsObject.imageUrl"
              :fit="fit"
            ></el-image>
          </div>
          <div class="goods_info_right_div">
            <div style="margin-top: 49px">{{ goodsObject.name }}</div>
            <div>分类：{{ goodsObject.categories }}</div>
            <div>标签：{{ goodsObject.tags }}</div>
            <div>上架时间：{{ goodsObject.createTime }}</div>
            <div style="color: red">价格：￥20</div>
            <div>
              <span class="demonstration">给商品打分：</span>
              <el-rate
                v-model="rateValue"
                :colors="colors"
                @change="changeValue"
                show-text
              >
              </el-rate>
            </div>
            <!-- 收藏与购买按钮 -->
            <el-row>
              <el-button type="danger" plain @click="pay">立即购买</el-button>
              <el-button type="warning" plain @click="addToShoppingCar"
                >加入购物车</el-button
              >
            </el-row>
          </div>
        </div>
        <!-- 个人商品推荐-实时推荐 -->
        <div class="hot_goods_header">
          <div>|</div>
          <div>实时推荐</div>
        </div>
        <!-- 实时推荐-内容区 -->
        <div class="red_goods_container" v-if="has_realtime_rec">
          <el-row :gutter="1">
            <el-col :span="4" v-for="(o, index) in 6" :key="o">
              <el-card :body-style="{ padding: '0px' }">
                <img
                  src="https://img.alicdn.com/bao/uploaded/i3/83547264/O1CN01t4ZbUI23WxaRN8olL_!!83547264.jpg"
                  class="image"
                />
                <div style="padding: 14px">
                  <span>漂亮的衣服</span>
                  <div class="bottom clearfix">
                    <time class="time">第 {{ index }} 件</time>
                    <el-button type="text" class="button">操作按钮</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fit: "fill", // 定义图片的显示方式
      rateValue: null, // 评分value初始值
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 评分颜色
      has_realtime_rec: false, // 是否有实时商品推荐
      goodsObject: {
        // 商品对象
        categories: "", // 商品分类
        createTime: "", // 商品创建时间
        imageUrl: "", // 商品图片
        name: "", // 商品名称
        productId: "", // 商品id
        tags: "", // 商品标签
      },
      rating: {
          productId: 0,
          userId: 0,
          score: 0.0
      }, //评分对象
    };
  },
  created() {
    console.log("id : " + this.$route.params.id); // 这里是$route，不是$router
    const id = this.$route.params.id; // 获取父组件传过来的参数
    this.getGoodsById(id); // 根据商品ID查询商品详细信息
    this.rating.userId = window.sessionStorage.getItem('userId'); // 获取sessionStorage中的userId
    this.rating.productId = id;
  },
  methods: {
    async getGoodsById(id) {
      // 根据id获取商品详细信息
      const { data: res } = await this.$http.get(
        `product/getProductById/${id}`
      );
      console.log(res);
      this.goodsObject = res.data.data;
    },
    handleCommand(command) {
      if (command == "a") {
        // 当点击了退出按钮，调用退出方法
        this.$router.push("/login");
        window.sessionStorage.clear();
      }
    },
    changeValue(value) {
      // 评分的改变回调函数
      this.$message({
        message: "打 " + value + " 分",
        type: "success",
      });
      this.rateValue = value; // 将改变的value值复制data中定义的rateValue,后面需要将其传递给后台系统
      this.rating.score = value;
      // 保存打分信息  
      this.saveRating();
    },
    pay() {
      // 支付函数，后面调用支付接口
      this.$message({
        message: "喜欢我，就买走吧！！",
        type: "success",
      });
    },
    addToShoppingCar() {
      // 加入购物车，后面需要调用后台接口记录捕获这个行为
      this.$message({
        message: "喜欢我，先放购物车也是可以的~！",
        type: "success",
      });
    },
    async saveRating() {
       const {data: res} = await this.$http.post('/rating/rateToProduct',this.rating);
       if (!res.success) {
           return; 
       } 
       this.$message({
        message: res.message,
        type: "success",
      });
    }
  },
};
</script>
<style lang="less" scoped>
// 头部样式
.home_container {
  height: 100%;
}
// container容器样式
.el-container {
  height: 100%;
}
.el-header {
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  color: #333;
  text-align: center;
}
// 商品详情介绍部分容器样式
.goods_info {
  display: flex;
  margin: 20px;
  height: 70%;
}
// 商品详情介绍部分图片所在div样式
.goods_info_img_div {
  margin-right: 20px;
  width: 40%;
}
// 商品详情介绍部分名称等所在div样式
.goods_info_right_div {
  margin-right: 20px;
  text-align: left;
  div {
    margin-top: 20px;
  }
}
// 推荐商品-头部样式
.hot_goods_header {
  height: 49px;
  background-color: #fff;
  border: 1px solid #f5f5f5;
  margin-top: 100px;
  display: flex;
  justify-content: left;
  line-height: 49px;
  font-size: 18px;
  color: coral;
  div:nth-child(1) {
    margin-left: 20px;
    margin-right: 10px;
  }
}
// 推荐商品-内容样式
.red_goods_container {
  height: auto;
  margin-top: 10px;
}
</style>